<template>
    <div>
        <page-top :active="'3'" :logoPic="logoPic"></page-top>
        <classify :data1="data1.list" @getId="getId1" :id="id"></classify>
        <list :data2='data3'></list>
        
        <div class="block">
        <div style="width:1200px;margin:80px auto;overflow:hidden">
            <el-pagination @current-change="handleCurrentChange" layout="prev, pager, next" :current-page="page" :total="data3.all_count" style="color:#333333;float:right" :page-size="20"></el-pagination>
        </div>
        </div>
        
        <page-bottom :napinAddress="way.position"></page-bottom>
    </div>
</template>

<script>
import pageTop from "@/components/common/pageTop";
import pageBottom from "@/components/common/pageBottom.vue";
import classify from '@/components/getGoods/classify.vue';
import List from '@/components/getGoods/list.vue';
import request from '@/request/index.js';
// import { constants } from 'http';

export default {
  name: "getGoods",
  components: {
    'PageTop': pageTop,
    'PageBottom': pageBottom,
    'classify':classify,
    'list':List,
  },
  data() {
    return {
      data1: {},
      data3:{},
      id:'',
      page:1,
      way:{},
      logoPic:"",
    };
  },
  watch: {
   
    id(newName, oldName) {
        this.page=1;
        this.getGoods(newName,this.page)
    },
    page(newName,oldName){
        this.getGoods(this.id,newName)
    }
  },
  methods: {
       handleCurrentChange(val) {
        this.page=val
        },
      getId1:function(id){
        this.id=id;
      },
      getGoods:function(id,page){
        request.getGoods(this,id,page);
      }
  },
  created(){
    this.loading=this.$loading({
      lock: true,
      // text: 'Loading',
      // spinner: 'el-icon-loading',
      background: 'rgba(255, 255, 255, 0.6)',
      target: document.querySelector('body'),
      
    });
    
  },
  mounted() {
    request.getGoodsList(this);
    request.GetContact(this);
    request.home(this);

  }
};
</script>

<style lang="scss">
.cardLists{
    .el-card__body{
        padding: 0px!important;
    }
}
.el-pager li.active{
    color:#FF4C50!important;
}
.el-pager li:hover{
    color:#FF4C50!important;
}
</style>
